<template>
  <div>
    <el-dialog title="推荐奖励海报" :visible.sync="showEditPageDialog" center width="770px">
      <el-form :model="pageData">
        <el-form-item :label="'封面：'" :label-width="formLabelWidth">
          <div class="upload_head_img">
            <el-upload :show-file-list="false" :before-upload="before_introduction_img_Upload_group" :http-request="upload_picture_vip_head_img" class="avatar-uploader" action="">
              <img v-if="pageData.head_img" :src="pageData.head_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <el-button type="danger" style="margin-left:200px;" @click="cancel()">取消保存</el-button>
      <el-button type="primary" style="margin-left:100px;" @click="confirm()">确定保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {edit,getList} from '@/api/thk/cms/member'
import { client } from '@/utils/alioss'
import store from '@/store'
import request from '@/utils/request'
export default {
  data(){
    return{
       formLabelWidth:'130px',
       showEditPageDialog: false,
       saveEditDialog:false,
       affirmEditDialog:false, 
       pageData:{
         head_img:'',
         type:''
       },
       verify:{
         validity_period:'',
         price:'',
         discount_price:''
       }
    }
  },
  inject: ['reload'],
  methods:{
    handleEdit(row){
      this.showEditPageDialog = true
    },
    confirm(){
      request({
        url:'video/Invite_reward/update_recommend_reward',
        method: 'post',
        params: {token:store.getters.token,type:this.pageData.type,value:this.pageData.head_img}
      }).then(res=>{
        console.log(res)
        this.$message.success(res.data.msg)
      })
      this.showEditPageDialog = !this.showEditPageDialog
      this.reload()
    },
    cancel(){
      this.showEditPageDialog = false
    },
    Checkcancel(){
      this.showEditPageDialog = true
      this.saveEditDialog = false
    },

    showEditDialog(row){
        console.log(row,'showEditDialog')
        this.pageData.head_img = row.head_img
        this.pageData.type=row.type
        this.showEditPageDialog=!this.showEditPageDialog
    },
    before_introduction_img_Upload_group(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return (isJPG | isPNG) && isLt2M
    },
    upload_picture_vip_head_img(file) {
      const that = this
      const fileName = 'user-admin_vip_posterset_head_img' + file.file.uid
      client().put(fileName, file.file).then((res) => {
        this.$set(that.pageData, 'head_img', res.url)
        console.log(res.url);
        console.log(this.pageData.head_img)
        that.$message.success('封面地址上传成功！')
      }).catch((err) => {
        that.$message.error('封面地址上传失败，原因：' + err)
      })
    },
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>